<template>
  <div class="habit">
    <div class="habit-container container">
      <HabitView></HabitView>
      <HabitDetail></HabitDetail>
    </div>
  </div>
</template>

<script setup lang="ts">
import HabitView from '@renderer/components/habit/HabitView.vue'
import HabitDetail from '@renderer/components/habit/HabitDetail.vue'
import { onMounted } from 'vue'
import habitStore from '@renderer/store/habit'

const store = habitStore()

onMounted(() => {
  store.getHabitList()
  store.currentHabit = undefined
})
</script>

<style scoped lang="scss">
.habit {
  height: 100%;
  width: calc(100% - 60px);
  display: flex;
  background-color: var(--xz-secondbg);

  .habit-container {
    height: 100%;
    width: 100%;
    display: flex;
    gap: 1px;
  }
}
</style>
